<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/element.css" />
    <link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div class="top-bar">
    <div class="container clearfix">
        <p class="left">
                <a href="article_detail.html?typeid=1001">保单验证</a> |
                <a href="article_detail.html?typeid=1002">信息披露</a> |
                <a href="article_detail.html?typeid=1003">关于我们</a> |
                <a href="article_detail.html?typeid=1004">联系我们</a>
        </p>
        <p class="right">
            <a href="login.html">登陆</a> |
            <a href="register.html">注册</a>
        </p>
    </div>
</div>
<div class="top-header">
    <div class="container clearfix">
        <a href="index.html" class="logo">
            <img src="images/logo.png" alt="" width="177" height="47" />
        </a>
        <ul class="header-nav">
            <li><a class="on" target="_self" href="index.html">首 页</a></li>
            <li><a target="_self" href="products_list.html">全部保险产品</a></li>
            <li><a target="_self" href="claims.html">保险理赔</a></li>
            <li><a target="_self" href="">企业团险</a></li>
            <li><a target="_self" href="center_orders.html">我的保单</a></li>
        </ul>
        <div class="header-rnav right">
            <a href="private_custom.html">
                <i class="i1"></i>
                定制
            </a>
            <a href="">
                <i class="i2"></i>
                公众号
            </a>
        </div>
    </div>
</div>
    <div class="container pay-container mt20">

        <div class="policy-form" id="appCtrl" v-loack>
            <div class="pay-title clearfix">
                <p>产品名称： 【 平安保险 】   全球驾乘意外险 <span class="right">支付金额： <span class="cRed">100.00元</:span> </span></p>
            </div>    

            <el-tabs v-model="activeIndex" type="border-card" ref="tab">
                <el-tab-pane label="支付宝/微信/银联" :name="1">
                    <ul class="clearfix pay-list">
                        <li :class="{active:paychannel=='alipay'}" @click="paychannel='alipay'" class="alipay"></li>
                        <li :class="{active:paychannel=='wechatpay'}" @click="paychannel='wechatpay'" class="wechatpay"></li>
                        <li :class="{active:paychannel=='unionpay'}" @click="paychannel='unionpay'" class="unionpay"></li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="银行卡" :name="2">
                    <ul class="clearfix pay-list">
                        <li :class="{active:paychannel=='zspay'}" @click="paychannel='zspay'" class="zspay"></li>
                        <li :class="{active:paychannel=='gspay'}" @click="paychannel='gspay'" class="gspay"></li>
                        <li :class="{active:paychannel=='gzpay'}" @click="paychannel='gzpay'" class="gzpay"></li>
                        <li :class="{active:paychannel=='jspay'}" @click="paychannel='jspay'" class="jspay"></li>
                    </ul>
                </el-tab-pane>
            </el-tabs>

            <div style="padding:50px 0">
                <el-button @click="onSubmit" style="padding:14px 50px" type="primary">确认支付</el-button>
            </div>

        <el-dialog
          title="温馨提示"
          :visible.sync="dialogVisible"
          width="30%">
          <div style="text-align:center">
              <i class="el-icon-info cGold" style="font-size:40px"></i>
              <p style="padding:10px">请在新打开的页面完成支付操作</p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="payComplete" type="primary" @click="dialogVisible = false">已经支付</el-button>
          </span>
        </el-dialog>

        </div>

    
    

    </div>
    <footer class="footer">
        <div class="container">
            <h3 class="footer-title">专业服务</h3>
            <ul class="guide-list clearfix">
                <li>
                    <i class="i1"></i>
                    <h3>7 x 24小时客服</h3>
                    <p>随时随地有保障</p>
                </li>
                <li>
                    <i class="i2"></i>
                    <h3>专业理赔服</h3>
                    <p>快速理赔不用等</p>
                </li>
                <li>
                    <i class="i3"></i>
                    <h3>保监会授权</h3>
                    <p>合法权威值得信赖</p>
                </li>
                <li>
                    <i class="i4"></i>
                    <h3>轻松投保</h3>
                    <p>多终端服务 轻松快捷</p>
                </li>
            </ul>
            <div class="service-container clearfix">
                <div class="aboutus-list">
                    <ul class="clearfix">
                        <li><a href="article_detail.html?id=3432">平台动态</a></li>
                        <li><a href="article_detail.html?id=3432">关于我们</a></li>
                        <li><a href="article_detail.html?id=124234">帮助中心</a></li>
                        <li><a href="article_detail.html?id=124234">媒体报道</a></li>
                        <li><a href="article_detail.html?id=124234">安全保障</a></li>
                        <li><a href="article_detail.html?id=124234">新手必读</a></li>
                        <li><a href="article_detail.html?id=124234">平台公告</a></li>
                        <li><a href="article_detail.html?id=124234">联系我们</a></li>
                        <li><a href="article_detail.html?id=124234">投研学堂</a></li>
                    </ul>
                </div>
                <ul class="service-qr left">
                    <li>
                        <img src="images/qr_code.png" alt="" width="94" height="94">
                        <p>关注公众号，活动早知道</p>
                    </li>
                    <li>
                        <a href="" target="_blank"><img src="images/qr_code.png" alt="" width="94" height="94"></a>
                        <p>下载APP，随时享收</p>
                    </li>
                </ul>
                <div class="service-list left">
                    <p class="telphone">400-666-8888</p>
                    <p>客服工作时间 08:30-20:30</p>
                    <a href="" class="udesk">一对一专属客服服务</a>
                    <p>service@163.com</p>
                    <p>深圳市福田区深南中路NEO大厦A座24层</p>
                    <div class="border-left"></div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="footer-with-logo">
                <span class="footer-with-logo-icp"><a rel="nofollow" title="ICP备案查询" href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action" target="_blank"></a></span>
                <span class="footer-with-logo-netservice"><a rel="nofollow" title="工商网监" href="" target="_blank"></a></span>
                <!-- <span class="footer-with-logo-vsafe"><a title="安全联盟行业验证" href="" target="_blank"></a></span>  -->
            </div>
            <p>
                <a rel="nofollow" href="http://www.iachina.cn/" target="_blank">中国保险行业协会</a> |
                <a rel="nofollow" href="https://iask.sina.com.cn/search?searchWord=%E4%BF%9D%E9%99%A9&record=1" target="_blank">新浪爱问保险</a> |
                <a rel="nofollow" href="https://insurance.cngold.org/" target="_blank">金投保险</a> |
                <a rel="nofollow" href="" target="_blank">腾讯保险</a> |
                <a rel="nofollow" href="http://www.rmic.cn/" target="_blank">中国保险网</a>
            </p>
            <p>Copyright ©2013-2018 深圳市康达尔（集团）股份有限公司 粤ICP备08029152号</p>
        </div>
    </footer>
    <script src="js/jquery.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/city-data.js"></script>
    <script>
        var vm = new Vue({
            el: '#appCtrl',
            data: function(){
                return {
                   paychannel:'',
                   activeIndex:1,
                   dialogVisible:false
                }
            },

            methods:{
                onSubmit: function(){
                    if(this.paychannel==''){
                        this.$message.error('请先选择支付方式');
                        return;
                    }
                    //防止新开页，浏览器拦截。
                    var page = window.open('about:blank', 'payBlankPager');
                    page.focus();
                    page.document.write(
                    '<div style="width:174px;margin:0 auto;padding-top:150px;color:#999">'+
                    '<p style="padding-left:1.5em;">跳转中<span>...</span></p>'+
                    '</div>');

                    this.dialogVisible = true;
                       //模拟异步跳转 //ajax
                       setTimeout(function(){
                            //微信支付跳转
                            window.open('https://payapp.weixin.qq.com/t/pindex?orderid', 'payBlankPager');
                       },500)
                },
                payComplete: function(){
                    alert('跳到个人中心，订单列表')
                }
            },

            mounted: function(){
               
            }
        })
    </script>

</body>

</html>